<template>
    <div class="dashboard-container">
        <div class="card-container">
            <el-card class="box-card" style="margin: 20px auto; width: 800px">
                <el-form ref="form" :model="form" label-width="120px" style="height: 100%">
                    <el-form-item label="链接地址：" prop="url" :rules="[{ required: true, message: '内容不能为空' }]">
                        <!-- <tinymce
                            v-model="form.content"
                            :height="600"
                            @input="handleContent"
                            /> -->
                        <el-input :disabled="isEdit ? false : true" v-model="form.url" placeholder="请输入链接地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            v-if="!isEdit"
                            type="primary"
                            icon="el-icon-edit-outline"
                            @click="
                                () => {
                                    this.isEdit = true;
                                }
                            "
                            >编辑</el-button
                        >
                        <el-button v-else :loading="loading" type="warning" icon="el-icon-edit-outline" @click="onSubmit('form')">保存</el-button>
                    </el-form-item>
                    <!-- <el-form-item label="预览：">
                        <iframe class="preview-box" :src="info.url" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" seamless width="375" height="600" frameborder="0"></iframe>
                    </el-form-item> -->
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import { getDetail, update } from "@/api/organize";
    import Tinymce from "@/components/Tinymce";

    export default {
        name: "Dashboard",
        components: {
            Tinymce,
        },
        data() {
            return {
                info: {},
                isEdit: false,
                loading: false,
                form: {
                    // name: "",
                    // phone: "",
                    // postCode: "",
                    // leader: "",
                    // description: "",
                    url: "",
                },
            };
        },
        async created() {
            let data = await getDetail({ id: 1 }),
                _this = this;
            if (data) {
                this.info = data;
                this.id = data.id;
                Object.keys(_this.form).forEach((key) => {
                    _this.form = {
                        ..._this.form,
                        [key]: data[key],
                    };
                });
            }
        },
        methods: {
            handleContent(val) {
                this["form"]["url"] = val;
            },
            onSubmit(formName) {
                const { validate } = this.$refs[formName];
                validate((valid) => {
                    if (valid) {
                        this._submitData({ id: this.id || 1, ...this.form });
                    }
                });
            },
            async _submitData(params) {
                this.loading = true;
                let res = await update(params);
                this.loading = false;
                if (res.code === 1) {
                    this.$message({
                        message: "保存成功！",
                        type: "success",
                        duration: 1 * 1000,
                    });
                    setTimeout(() => {
                        this.$router.go(0);
                    }, 1000);
                }
            },
        },
        computed: {},
    };
</script>

<style lang="scss" scoped>
    .dashboard-container {
        text-align: center;
        height: 100%;
        div::-webkit-scrollbar {
            width: 0 !important;
            display: none;
        }
        ::v-deep .el-card__body {
            height: 100%;
        }
        .card-container {
            // width: 50%;
            // margin: 60px auto 30px;
            text-align: left;
            .my-card {
                height: 80vh;
                overflow-y: auto;
                margin: 30px 80px 0;
                .content {
                    line-height: 1.5;
                    text-indent: 2em;
                }
            }
            .edit-card {
                margin: 10px 0;
            }
            .input-row {
                margin: 20px 0 0;
            }
        }
    }
</style>
